<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统设置-用户管理</title>
    <!-- jquery - boot -库文件 -->
    <script src="__PUBLIC__/script/jquery.1.11.1.js"></script>
    <script src="__PUBLIC__/script/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap -->
    <!-- font awesome -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/FontAwesome/css/font-awesome.min.css">
    <script src="__PUBLIC__/script/common.js"></script>
    <!--easyui包含文件-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/easyui1.5.3/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/easyui1.5.3/themes/icon.css">
    <script type="text/javascript" src="__PUBLIC__/plugins/easyui1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/plugins/easyui1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <!--layer-->
    <script type="text/javascript" src="__PUBLIC__/plugins/layer/layer.js"></script>
    <!-- 自定义 css -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css">
    <!-- end easyui -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="__PUBLIC__/script/html5shiv.js"></script>
    <script src="__PUBLIC__/script/respond.js"></script>
    <![endif]-->
</head>

<body>
    <include file="Public/header" />
    <!-- indexmain -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mainbox" id="mainbox">
                <!--menubegin-->
                <div class="datamenubox" id="leftmenu">
                    <div class="menuhead">系统设置</div>
                    <!-- treein -->
                    <div class="treein" id="menuin">
                        <ul class="list-group smenu">
                            <volist name="menulist" id="vo">
                                <a href="{:U($vo[url])}"><li class="list-group-item" id="{$vo.url}"><i class="fa fa-angle-right"></i>{$vo.name}</li></a>
                            </volist>
                        </ul>
                    </div>
                </div>
                <!--menuend-->
                <!--mainboxbegin-->
                <div class="col-md-12 rights" id="right">
                    <!-- 位置导航 -->
                    <ol class="breadcrumb">
                        <li class="active">首页</li>
                        <li class="active">系统设置</li>
                        <li class="active">用户管理</li>
                    </ol>
                    <!-- 筛选 -->
                    <div class="searchitem">
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-textbox" name="q_name" id="q_name" style="width:300px" data-options="label:'用户名：',required:false">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="btnin">
                                    <button class="btn btn-danger" id="querybtn">查询</button>
                                    <button class="btn btn-info" id="addbtn">添加</button>
                                    <button class="btn btn-info" id="updatebtn">编辑</button>
                                    <button class="btn btn-info" id="delbtn">删除</button>
                                </div>
                            </div>
                        </div>
                        <!-- end 筛选 -->
                    </div>
                    <!-- listtable -->
                    <div>
                        <!-- gridview row -->
                        <table id="dg"></table>
                        <!-- end gridview row -->
                    </div>
                    <!--mainboxend-->
                </div>
            </div>
        </div>
        <!-- indexmain end -->
        <!-- modals -->
        <div id="w" class="easyui-window" title="添加/编辑用户" data-options="modal:true,closed:true" style="width:700px;height:400px;padding:15px;display:none;">
            <div class="row">
                <div class="col-md-12">
                <form id="ff" method="post" data-options="novalidate:true">
                    <div class="row">
                        <div class="col-md-6">
                                <input class="easyui-textbox" name="username" id="username" style="width:300px" data-options="label:'账户名：',required:true">
                        </div>
                        <div class="col-md-6">
                            <input class="easyui-textbox"  type="password" name="pwd" id="pwd" style="width:300px" data-options="label:'密码：',required:true">
                        </div>                     
                    </div>
                    <div class="blank10"></div> 
                    <div class="row">
                        <div class="col-md-6">
                            <input class="easyui-textbox" name="xm" id="xm" style="width:300px" data-options="label:'姓名：',required:true">
                        </div>
                        <div class="col-md-6">
                            <input class="easyui-textbox"  type="text" name="phone" id="phone" style="width:300px" data-options="label:'电话：',required:true">
                        </div>
                    </div>
                    <div class="blank10"></div>                 
                    <div class="row">                 
                        <div class="col-md-6">
                            <input class="easyui-combobox" name="role" id="role" style="width:300px" data-options="label:'角色：',valueField:'id',textField:'text',panelHeight:'100',required:true"/>
                        </div>
                        <div class="col-md-6">
                            <input class="easyui-textbox" name="workpace" id="workpace" style="width:300px" data-options="label:'工作地点：'">
                        </div>
                    </div>
                    <input type="hidden" id="hidid" name="hidid" />
                   </form> 
                    <div class="blank10"></div>
                    <div class="btnin">
                        <a class="btn btn-info" id="submits">提交</a>&nbsp;
                        <a class="btn btn-default" id="clear">重置</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- /modals -->
    <include file="Public/footer" />
    <script>
    $(document).ready(function() {
        //初始化页面
        $('#yhgl').addClass('on');
        loaddg();
        LoadDDL('role','ROLE');
    });
    //加载数据列表
    function loaddg() {
        $('#dg').datagrid({
            loadMsg: '正在查询，请稍后...',
            title: '点击选中某行数据，再点击编辑可弹出信息维护窗口',
            height: $(window).height() - 300,
            url: '{:U(\'queryuser\')}',
            queryParams: {
                username: $('#q_name').textbox('getValue')
            },
            nowrap: false,
            striped: true,
            collapsible: false,
            loadMsg: '正在加载，请稍后。。。',
            remoteSort: false,
            singleSelect: true,
            pageSize: 100,
            idField: 'id',
            pagination: true,
            rownumbers: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [20, 40, 80, 160],
            fitColumns: true,
            columns: [
                [{
                    field: 'username',
                    title: '用户名',
                    width: 100
                }, {
                    field: 'password',
                    title: '密码',
                    width: 100
                }, {
                    field: 'xm',
                    title: '姓名',
                    width: 100
                }, {
                    field: 'phone',
                    title: '电话',
                    width: 100
                }, {
                    field: 'workpace',
                    title: '工作地点',
                    width: 100
                }, {
                    field: 'role',
                    title: '角色',
                    width: 100
                }]
            ]
        });
        $("#querybtn").click(function() {
            $('#dg').datagrid('load', {
                "username": $('#q_name').textbox('getValue')
            });
        });
    }
    // 打开弹窗
    $("#addbtn").click(function() {
        $('#ff').form('clear');
        document.getElementById("hidid").value = "I";
        $('#w').window('open');
    })

    //编辑
    $("#updatebtn").click(function() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
        $('#ff').form('clear');
        document.getElementById("hidid").value = row.id;
        $('#username').textbox('setValue',row.username);
        $('#pwd').textbox('setValue',row.password);
        $('#xm').textbox('setValue',row.xm);
        $('#phone').textbox('setValue',row.phone);
        $('#role').combobox('setValue',row.roleid);
        $('#workpace').textbox('setValue',row.workpace);
        $('#w').window('open');
        }
        else{
            layer.msg('请选择需要编辑的用户！');
        }
    })

    //重置
    $('#clear').click(function(){
        $('#ff').form('clear');
    })

    //删除
    $('#delbtn').click(function(){
        var row = $('#dg').datagrid('getSelected');
        if(row){
            layer.confirm('您确定要删除选中的数据？', {
                btn: ['是','否'] //按钮
                }, function(){
                    var option = {
                        type: "POST",
                        url: "{:U('deluser')}",
                        data: {id:row.id},
                        success: function (data) {
                            layer.closeAll();
                            layer.msg(data);
                            $("#querybtn").click();
                        }
                    };
                    $.ajax(option);
                }, function(){
                    layer.closeAll();
                });
            }
        else{
            layer.msg('请选择需要删除的数据！');
        }
    })

    //新增用户
    $('#submits').click(function(){
        var url="";
        var flg=document.getElementById("hidid").value;
        if(flg=="I"){
          url="{:U('adduser')}";
        }
        else{
          url="{:U('edituser')}";
        }
        $('#ff').form('submit', {
            url: url,
            onSubmit: function(param){
                var isOk = false;
                isOk = $(this).form('enableValidation').form('validate');
                return isOk;
            },
            success: function (data) {
                layer.msg(JSON.parse(data));
                $("#querybtn").click();
                $('#w').window('close');
                $('#ff').form('clear');
            }
        });
    })
    </script>
</body>

</html>